<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #allmap {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }

        .speech-bubble {
            position: relative;
            background-color: #FFFFFF;

            width: 250px;
            height: 130px;
            line-height: 150px; /* 垂直居中 */
            color: black;
            /*   text-align: center; */
            border-radius: 10px;
            font-family: sans-serif;
        }

        .speech-bubble:after {
            content: '';
            position: absolute;

            width: 0;
            height: 0;

            border: 10px solid transparent;
        }

        /* 箭头的位置 */
        .speech-bubble-bottom:after {
            border-top-color: #FFFFFF;
            top: 100%;
            left: 50%;
            margin-left: -15px;
        }

    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=BCTHLO5T1L0xGkPyv3sGHDOFqww6H3LB"></script>
    <title>添加自定义覆盖物作信息提示窗，鼠标移入移出可以显示和隐藏，点击后移出不隐藏</title>
</head>
<body onload="">
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    //百度地图API功能
    var mp = new BMap.Map("allmap");
    mp.centerAndZoom(new BMap.Point(110.069361, 41.025911), 14);
    var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左下角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT});  //右上角，添加默认缩放平移控件
    var myIcon = new BMap.Icon("images/marker.png", new BMap.Size(28, 57));

    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, content) {
        this._point = point;
        this._content = content;
    }

    // 继承API的BMap.Overlay
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    //实现初始化方法 
    ComplexCustomOverlay.prototype.initialize = function (map) {
        // 保存map对象实例
        this._map = map;
        // 创建div元素，作为自定义覆盖物的容器
        var div = document.createElement("div");
        div.style.position = "absolute";

        // 可以根据参数设置元素外观
        div.style.width = "250px";
        div.style.height = "130px";
        div.style.padding = "0px";

        var div1 = this._div1 = document.createElement("div1");
        div1.class = "speech-bubble speech-bubble-bottom";
        div1.innerHTML = this._content;
        div.appendChild(div1);
        mp.getPanes().labelPane.appendChild(div);
        // 保存div实例
        this._div = div;
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;
    }
    //实现绘制方法
    ComplexCustomOverlay.prototype.draw = function () {
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left = pixel.x - 250 / 2 + "px";
        this._div.style.top = pixel.y - 140 + "px";
    }
    // 实现显示方法
    ComplexCustomOverlay.prototype.show = function () {
        if (this._div) {
            this._div.style.display = "";
        }
    }
    // 实现隐藏方法
    ComplexCustomOverlay.prototype.hide = function () {
        if (this._div) {
            this._div.style.display = "none";
        }
    }
    //6、自定义覆盖物添加事件方法
    ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
        this._div['on' + event] = fun;
    }

    var myMap = {};
    var clickMap = {};

    var data_info = [
        [110.069415, 41.025918, "1506600009"],
        [110.069361, 41.025911, "1506600011"],
        [110.044236, 41.018209, "1504900021"],
        [110.048323, 41.010275, "1504900022"],
        [110.057374, 41.012785, "1508900003"],
        [110.088388, 41.032145, "1508900002"],
        [110.066999, 41.015235, "1508030001"],
        [110.055442, 41.012483, "1508900001"],
        [110.065728, 41.042141, "1508900005"],
        [110.058609, 40.984248, "1508020002"],
        [110.050542, 41.018229, "1506600005"],
        [110.108739, 40.981144, "1507020001"],
        [110.07414, 41.035053, "1506600006"],
        [110.066999, 41.015235, "1508600022"],
        [110.087615, 41.032128, "1508600023"],
        [110.116442, 40.970229, "1508600024"],
        [110.071715, 41.041913, "1508600020"],
        [110.083636, 41.03442, "1508900004"],
        [110.107315, 41.035971, "1508600026"],
        [110.06549, 41.035672, "1506600007"],
        [110.051395, 41.010183, "1504900020"],
        [110.053147, 41.013718, "1504900023"],
        [110.095799, 41.040332, "1504900024"],
        [110.052123, 41.020733, "1509020001"]
    ];

    var opts = {
        width: 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "<div style='color:white;background:black;text-align:center'>大表信息</div>", // 信息窗口标题
        enableMessage: true //设置允许信息窗发送短息
        //enableCloseOnClick:true  //关闭点击地图关闭信息窗口
    };


    for (var i = 0; i < data_info.length; i++) {

        var content = "<div class='speech-bubble speech-bubble-bottom' style= ><div style='width:250px;height:30px;padding:0px;background:#63B8FF;border: 0px solid;text-align:center;line-height:30px;border-radius: 10px 10px 0px 0px'>title</div><div style='width:250px;height:100px;padding:0px;text-align:center;line-height:100px'>content</div></div>";
        var html = "<div class='speech-bubble speech-bubble-bottom' style= ><div style='width:250px;height:30px;padding:0px;background:#63B8FF;border: 0px solid;text-align:center;line-height:30px;border-radius: 10px 10px 0px 0px'><b>水表表号：</b>" + data_info[i][2] + "</div><div style='width:250px;height:100px;padding:0px;line-height:2em;font-size:11px'><span><b>正向：</b>" + data_info[i][2] + "m³&nbsp;,&nbsp;" + data_info[i][2] + "m³</br><b>负向：</b>" + data_info[i][2] + "m³&nbsp;,&nbsp;" + data_info[i][2] + "m³</br><b>压力/瞬时：</b>" + data_info[i][2] + "MPa/" + data_info[i][2] + "m³/h</br><b>采集时间：</b>" + data_info[i][2] + "</span></div></div>";

        CompOverlay = new ComplexCustomOverlay(new BMap.Point(data_info[i][0], data_info[i][1]), html);
        myMap[data_info[i][0] + "-" + data_info[i][1]] = CompOverlay;
        clickMap[data_info[i][0] + "-" + data_info[i][1]] = false;
        //mp.addOverlay(CompOverlay);

        marker = new BMap.Marker(new BMap.Point(data_info[i][0], data_info[i][1]), {icon: myIcon});  // 创建标注
        mp.addOverlay(marker);               // 将标注添加到地图中

        addClickHandler(html, marker);
        //CompOverlay.hide();
        addmouseover(html, marker);
        addmouseout(html, marker);

    }


    //鼠标单击标注的事件
    function addClickHandler(content, marker) {
        marker.addEventListener("click", function (e) {
                var p = e.target;
                var isClicked = clickMap[p.getPosition().lng + "-" + p.getPosition().lat];
                if (isClicked) {
                    clickMap[p.getPosition().lng + "-" + p.getPosition().lat] = false;
                } else {
                    clickMap[p.getPosition().lng + "-" + p.getPosition().lat] = true;
                }
            }
        );

    }

    //打开信息窗口的函数
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var CompOverlay = myMap[p.getPosition().lng + "-" + p.getPosition().lat];
        mp.addOverlay(CompOverlay);

    }

    //关闭信息窗口的函数
    function closeInfo(content, e) {
        var p = e.target;
        var CompOverlay = myMap[p.getPosition().lng + "-" + p.getPosition().lat];
        var isClicked = clickMap[p.getPosition().lng + "-" + p.getPosition().lat];
        if (isClicked) {

        } else {
            mp.removeOverlay(CompOverlay);
        }

    }


    //鼠标移动到标注触发的事件
    function addmouseover(content, e) {
        marker.addEventListener("mouseover", function (e) {
                openInfo(content, e);
            }
        );
    }

    //鼠标离开标注触发的事件
    function addmouseout(content, e) {
        marker.addEventListener("mouseout", function (e) {
                closeInfo(content, e);
            }
        );
    }

    //添加地图控件
    mp.addControl(top_left_control);
    mp.addControl(top_left_navigation);
    //启动鼠标滚轮缩放地图
    mp.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    mp.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
</script>
